Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Editor: add more menu and fullscreen toggle #21006

Merged
merged 4 commits into from
Mar 23, 2020
Merged

Conversation

vindl
Copy link
Member

@vindl vindl commented Mar 19, 2020

Description

Adds more menu to the Site Editor's header which contains the Fullscreen mode toggle option.

Follow up of #20691

How has this been tested?

Navigate to site editor and verify that Fullscreen toggle works as expected. Reload the page and make sure that the preference is saved properly.

Screenshots

Screenshot 2020-03-19 at 01 21 27

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Mar 19, 2020

Size Change: -412 B (0%)

Total Size: 857 kB

Filename Size Change
build/block-directory/index.js 6.02 kB -1 B
build/block-editor/index.js 100 kB +143 B (0%)
build/block-editor/style-rtl.css 10.9 kB +12 B (0%)
build/block-editor/style.css 10.9 kB +24 B (0%)
build/block-library/editor-rtl.css 7.24 kB +29 B (0%)
build/block-library/editor.css 7.24 kB +30 B (0%)
build/block-library/index.js 110 kB -1.12 kB (1%)
build/block-library/style-rtl.css 7.41 kB -6 B (0%)
build/block-library/style.css 7.42 kB -6 B (0%)
build/blocks/index.js 57.5 kB -23 B (0%)
build/components/index.js 191 kB -135 B (0%)
build/components/style-rtl.css 15.8 kB +9 B (0%)
build/components/style.css 15.7 kB +9 B (0%)
build/core-data/index.js 10.6 kB +1 B
build/data/index.js 8.2 kB +1 B
build/edit-post/index.js 91.2 kB +14 B (0%)
build/edit-post/style-rtl.css 8.47 kB +4 B (0%)
build/edit-post/style.css 8.46 kB +3 B (0%)
build/edit-site/index.js 5.95 kB +395 B (6%) 🔍
build/edit-site/style-rtl.css 2.69 kB +68 B (2%)
build/edit-site/style.css 2.69 kB +66 B (2%)
build/edit-widgets/index.js 4.43 kB -1 B
build/editor/index.js 43.8 kB -3 B (0%)
build/editor/style-rtl.css 3.97 kB +2 B (0%)
build/editor/style.css 3.96 kB +3 B (0%)
build/html-entities/index.js 622 B +1 B
build/is-shallow-equal/index.js 710 B -1 B
build/list-reusable-blocks/index.js 2.99 kB -1 B
build/media-utils/index.js 4.84 kB +5 B (0%)
build/notices/index.js 1.57 kB -2 B (0%)
build/plugins/index.js 2.54 kB -1 B
build/primitives/index.js 1.5 kB +2 B (0%)
build/priority-queue/index.js 781 B +1 B
build/redux-routine/index.js 2.84 kB +1 B
build/rich-text/index.js 14.4 kB +62 B (0%)
build/server-side-render/index.js 2.55 kB +1 B
build/url/index.js 4.01 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 998 B 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/date/index.js 5.37 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-widgets/style-rtl.css 2.58 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 381 B 0 B
build/editor/editor-styles.css 382 B 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 6.95 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.93 kB 0 B
build/i18n/index.js 3.49 kB 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.69 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

min-width: 260px;

// Let the menu scale to fit items.
@include break-mobile() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is probably copied, but that particular breakpoint is not something we use often, I guess we prefer "small/medium"

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know the reasons for these styles?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tbh I don't. I just copied the CSS file from the existing component and made a note to circle back and check if all of this is needed. I tried testing on mobile widths but couldn't notice any visual difference.

I removed this in 5582081 but let me know if you'd prefer me to do something else.

@@ -1,3 +1,5 @@
@import "./more-menu/style.scss";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We try to import things in the main style.scss of the package for consistency.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in 5582081.

}

export default compose( [
withSelect( ( select, { feature } ) => ( {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: but we're preferring useSelect/useDispatch lately

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Refactored in 093b683.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking good, left some minor comments.

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great and works great on my end!

I have nothing to point out code-wise that Riad hasn't.

@MichaelArestad MichaelArestad added the Needs Design Feedback Needs general design feedback. label Mar 19, 2020
@MichaelArestad
Copy link
Contributor

I am curious. Why isn't the standard "more" menu available here?

I did test this and it works as expected.

@MichaelArestad MichaelArestad removed the Needs Design Feedback Needs general design feedback. label Mar 19, 2020
@vindl
Copy link
Member Author

vindl commented Mar 19, 2020

I am curious. Why isn't the standard "more" menu available here?

I guess no other reason than the fact that no one has developed it yet, and since this is a separate editor instance it's not something that will be carried over automatically. I suppose that we'll introduce it in the near future, at least for the items that make sense in this context.

@MichaelArestad
Copy link
Contributor

I guess no other reason than the fact that no one has developed it yet, and since this is a separate editor instance it's not something that will be carried over automatically. I suppose that we'll introduce it in the near future, at least for the items that make sense in this context.

That makes sense. I suppose the next question is about whether this should be a separate editor instance (not related to this PR) or whether the "more" menu should be a component that can be reused consistently. Something to chew on.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great

@vindl vindl merged commit 38f02d5 into master Mar 23, 2020
@vindl vindl deleted the add/site-editor-menu branch March 23, 2020 10:45
@github-actions github-actions bot added this to the Gutenberg 7.8 milestone Mar 23, 2020
@vindl vindl mentioned this pull request Mar 31, 2020
17 tasks
@youknowriad youknowriad mentioned this pull request Apr 23, 2020
53 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants